<template>
	<view>
		<view class="topbgc">
			<view class="mainpadding">
				<!-- <view class="xiaobai bigtext fonweight">个人中心</view> -->
				<view class="margin_top flexbetween" v-if="!is_login" @click="jumpurl('/pages/login/login')">
					<view class="flexleft">
						<image src="@/static/image/system/weidenglu.png" class="headimg margin_right3" style="border-radius: 0;" mode=""></image>
						<view class="xiaobai bigtext fonweight">未登录点击登录</view>
					</view>
					<u-icon name="arrow-right" color="#fff" size="28" ></u-icon>
				</view>
				<view class="margin_top flexbetween" v-if="is_login" @click="jumpurl('/pages/mine/bianjizl')">
					<view class="flexleft">
						<image :src="userInfo.avatar_text" class="headimg margin_right3" mode=""></image>
						<view class="">
							<view class="xiaobai bigtext fonweight">{{userInfo.nickname}}</view>
							<view class="xiaobai margin_top2 ershil">{{userInfo.mobile}}</view>
						</view>
					</view>
					<u-icon name="arrow-right" color="#fff" size="28" ></u-icon>
				</view>
				<view class="mainpadding_top ffffff radius">
					<view class="xiaohei sanshier fonweight">我的订单</view>
					<view class="flexaround margin_top">
						<view class="flexcolumn" @click="jumpurl('/pages/mine/wodedd?current=0')">
							<image src="@/static/image/system/my2.png" class="myicon" mode=""></image>
							<view class="smalltext xiaohei margin_top1">待支付</view>
						</view>
						<view class="flexcolumn" @click="jumpurl('/pages/mine/wodedd?current=1')">
							<image src="@/static/image/system/my1.png" class="myicon" mode=""></image>
							<view class="smalltext xiaohei margin_top1">待出行</view>
						</view>
						<view class="flexcolumn" @click="jumpurl('/pages/mine/wodedd?current=2')">
							<image src="@/static/image/system/my3.png" class="myicon" mode=""></image>
							<view class="smalltext xiaohei margin_top1">历史订单</view>
						</view>
					</view>
					
				</view>
				<view class="mainpadding_top ffffff radius">
					<view class="xiaohei sanshier fonweight">便捷功能</view>
					<view class="flexaround margin_top">
						<view class="flexcolumn " @click="jumpurl('/pages/mine/chengcher')">
							<image src="@/static/image/system/my4.png" class="myicon" mode=""></image>
							<view class="smalltext xiaohei margin_top1">常用乘车人</view>
						</view>
						<view class="flexcolumn " @click="jumpurl('/pages/mine/wodetc')">
							<image src="@/static/image/system/my6.png" class="myicon" mode=""></image>
							<view class="smalltext xiaohei margin_top1">我的套餐</view>
						</view>
						<view class="flexcolumn " @click="jumpurl('/pages/mine/hexiaolb')" v-if="is_login && userInfo.hx_type==2">
							<image src="@/static/image/system/my7.png" class="myicon" mode=""></image>
							<view class="smalltext xiaohei margin_top1">核销</view>
						</view>
						<button open-type="contact" hover-class="none">
							<view class="flexcolumn ">
								<image src="@/static/image/system/my5.png" class="myicon" mode=""></image>
								<view class="smalltext xiaohei margin_top1">联系客服</view>
							</view>
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding gudingdb" v-if="is_login">
			<view class="bigbtn" @click="show=true">退出登录</view>
		</view>
		<u-modal :show="show" cancelColor="#555" confirmColor="#2772f1" :showCancelButton="true" title="确定要退出当前账户么？"
			@cancel="show=false" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				is_login: false,
				userInfo:{},
				show: false,
			}
		},
		onShow() {
			this.is_login = httpRequest.checkIsLogin();
			if (this.is_login) {
				this.init()
			} else {
				this.userInfo = {}
			}
		},
		methods: {
			confirm() {
				this.show = false;
				// 将存储的数据改为空达到退出登录的效果
				uni.removeStorageSync('token');
				uni.removeStorageSync('user_id');
				httpRequest.toast("退出登录成功")
				this.userInfo = {}
				this.is_login = false
			},
			init() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			jumpurl(url) {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style>
	.topbgc{
		background: linear-gradient(180deg, #3e9bfe 0%, #f7fbfe 100%);
		height: 375rpx;
		width: 100%;
		box-sizing: border-box;
	}
page{
	background-color: #f7fbfe;
}
.headimg{
	width: 150rpx;
	height: 150rpx;
	box-sizing: border-box;
	border-radius: 50%;
}
.myicon{
	width: 75rpx;
	height: 75rpx;
}
</style>
